<template>
	<div class="links">
		<div class="line">
			<Link style="width: 20px" />
			<span class="title">网站列表</span>
		</div>
		<el-row class="link-all" :gutter="20">
			<el-col :span="8" v-for="(item, index) in linksData" :key="item" @click="jumpLink(item.link)">
				<div class="item cards" :style="{ marginBottom: index > 3 ? '0' : '20px' }">
					<SvgIcon :name="item.icon" style="width: 30px" />
					<span class="name">{{ item.name }}</span>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { Link } from "@element-plus/icons-vue";

// 网站链接数据
// 建议不要超出6个，若需要超出请自行调整样式
let linksData = [
	{
		icon: "blog-solid",
		name: "博客",
		link: "https://web.xiaobing.website"
	},
	{
		icon: "cloud-fill",
		name: "网盘",
		link: "https://pan.imsyy.top/"
	},
	{
		icon: "compact-disc",
		name: "音乐",
		link: "https://music.imsyy.top/"
	},
	{
		icon: "compass",
		name: "起始页",
		link: "https://nav.imsyy.top/"
	},
	{
		icon: "book",
		name: "网址集",
		link: "https://web.imsyy.top/"
	},
	{
		icon: "fire",
		name: "今日热榜",
		link: "https://hot.imsyy.top/"
	}
];

// 链接跳转
const jumpLink = (url: string) => {
	window.open(url, "_blank");
};
</script>

<style lang="scss" scoped>
.links {
	.line {
		display: flex;
		align-items: center;
		margin: 2rem 0.25rem 1rem;
		font-size: 1.1rem;
		animation: fade 0.5s;
		animation: fade;
		.title {
			margin-left: 8px;
			font-size: 1.15rem;
			text-shadow: 0 0 5px #00000050;
		}
	}
	.link-all {
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100px;
			animation: fade 0.5s;
			animation: fade;
			&:hover {
				background: rgb(0 0 0 / 40%);
				transition: 0.3s;
				transform: scale(1.02);
			}
			.name {
				margin-left: 8px;
				font-size: 1.1rem;
			}
			@media (min-width: 720px) and (max-width: 820px) {
				.name {
					display: none;
				}
			}
			@media (max-width: 720px) {
				height: 80px;
			}
			@media (max-width: 460px) {
				flex-direction: column;
				.name {
					margin-top: 8px;
					margin-left: 0;
					font-size: 1rem;
				}
			}
		}
	}
}
</style>
